<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich">
    <div id="navigation">
        <h:outputStylesheet>
        .optionList {
            height: 22px;
        }

        .vertical-menu-cell {
            padding: 0px 4px 0px 4px;
        }
        </h:outputStylesheet>

        <h:panelGrid styleClass="vertical-menu-cell" columnClasses="optionList"
            columns="1" cellspacing="0" cellpadding="0">
            <rich:menuItem style="border:1px solid #{a4jSkin.panelBorderColor}" mode="client"
                           onclick="document.location.href='#{link.linkMap['index']}'" >
                <h:outputText value="#{menu.index}"/>
            </rich:menuItem>

            <rich:dropDownMenu jointPoint="topRight" direction="bottomRight"
                style="border:1px solid #{a4jSkin.panelBorderColor}" label="#{menu.book}"
                mode="client">
                <rich:menuItem style="border:1px solid #{a4jSkin.panelBorderColor}" mode="client"
                               onclick="document.location.href='#{link.linkMap['addBook']}'" >
                    <h:outputText value="#{menu.addBook}"/>
                </rich:menuItem>
                <rich:menuItem style="border:1px solid #{a4jSkin.panelBorderColor}" mode="client"
                               onclick="document.location.href='#{link.linkMap['modifyBook']}'" >
                    <h:outputText value="#{menu.modifyBook}"/>
                </rich:menuItem>
            </rich:dropDownMenu>

            <rich:dropDownMenu jointPoint="topRight" direction="bottomRight"
                style="border:1px solid #{a4jSkin.panelBorderColor}" label="#{menu.reader}"
                mode="client">
                <rich:menuItem style="border:1px solid #{a4jSkin.panelBorderColor}" mode="client"
                               onclick="document.location.href='#{link.linkMap['addReader']}'" >
                    <h:outputText value="#{menu.addReader}"/>
                </rich:menuItem>
                <rich:menuItem style="border:1px solid #{a4jSkin.panelBorderColor}" mode="client"
                               onclick="document.location.href='#{link.linkMap['modifyReader']}'" >
                    <h:outputText value="#{menu.modifyReader}"/>
                </rich:menuItem>
            </rich:dropDownMenu>

            <rich:dropDownMenu jointPoint="topRight" direction="bottomRight"
                style="border:1px solid #{a4jSkin.panelBorderColor}" label="#{menu.hire}"
                mode="client">
                <rich:menuItem style="border:1px solid #{a4jSkin.panelBorderColor}" mode="client"
                               onclick="document.location.href='#{link.linkMap['hireBook']}'" >
                    <h:outputText value="#{menu.hireBook}"/>
                </rich:menuItem>
                <rich:menuItem style="border:1px solid #{a4jSkin.panelBorderColor}" mode="client"
                               onclick="document.location.href='#{link.linkMap['giveBackBook']}'" >
                    <h:outputText value="#{menu.giveBackBook}"/>
                </rich:menuItem>
            </rich:dropDownMenu>

            <rich:dropDownMenu jointPoint="topRight" direction="bottomRight"
                style="border:1px solid #{a4jSkin.panelBorderColor}" label="#{menu.category}"
                mode="client">
                <rich:menuItem style="border:1px solid #{a4jSkin.panelBorderColor}" mode="client"
                               onclick="document.location.href='#{link.linkMap['addCategory']}'" >
                    <h:outputText value="#{menu.addCategory}"/>
                </rich:menuItem>
                <rich:menuItem style="border:1px solid #{a4jSkin.panelBorderColor}" mode="client"
                               onclick="document.location.href='#{link.linkMap['modifyCategory']}'" >
                    <h:outputText value="#{menu.modifyCategory}"/>
                </rich:menuItem>
            </rich:dropDownMenu>

            <rich:dropDownMenu jointPoint="topRight" direction="bottomRight"
                style="border:1px solid #{a4jSkin.panelBorderColor}" label="#{menu.author}"
                mode="client">
                <rich:menuItem style="border:1px solid #{a4jSkin.panelBorderColor}" mode="client"
                               onclick="document.location.href='#{link.linkMap['addAuthor']}'" >
                    <h:outputText value="#{menu.addAuthor}"/>
                </rich:menuItem>
                <rich:menuItem style="border:1px solid #{a4jSkin.panelBorderColor}" mode="client"
                               onclick="document.location.href='#{link.linkMap['modifyAuthor']}'" >
                    <h:outputText value="#{menu.modifyAuthor}"/>
                </rich:menuItem>
            </rich:dropDownMenu>

        </h:panelGrid>
    </div>
</ui:composition>